<template>
  <div>
    <h1>用户列表</h1>
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <el-table :data="userlist">
          <el-table-column label="用户ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="username">
          </el-table-column>
          <el-table-column label="级别" prop="level">
              <template slot-scope="scope">{{scope.row.level|changeLevel}}</template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" @click="upgrade(scope.row.id)">升级</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userlist: []
    };
  },
  created() {
    this.axios.get("/userlist").then(resp => {
      console.log(resp.data);
      this.userlist = resp.data;
    });
  },
  methods:{
      upgrade(id){
          //升级
          const data={
            "id":id,
          }
          this.axios.put("userlist",data).then(resp=>{
            console.log(resp.data)
          }).catch(error=>{
            console.log(error)
          })
      }
  },
  filters:{
      changeLevel(val){
          if(val==1){
              return  "普通用户"
          }else{
              return "VIP用户"
          }
      }
  }
};
</script>

<style>
</style>